<template>
  <div class="rk-trace-search">
    <div>
      <a class="rk-trace-clear-btn r">
        <span class="mr-5 vm">{{ this.$t('more') }}</span>
      </a>
      <a class="rk-trace-search-btn bg-blue r mr-10" @click="getTraceList">
        <svg class="icon mr-5 vm">
          <use xlink:href="#search"></use>
        </svg>
        <span class="vm">{{ this.$t('search') }}</span>
      </a>
      <a class="rk-trace-clear-btn r mr-20" @click="clearSearch">
        <svg class="icon mr-5 vm">
          <use xlink:href="#clear"></use>
        </svg>
        <span class="vm">{{ this.$t('clear') }}</span>
      </a>
      <div class="flex-h">
        <TraceSelect :hasSearch="true" :title="this.$t('service')" :value="service" @input="chooseService" :data="rocketTrace.services"/>
        <TraceSelect :hasSearch="true" :title="this.$t('instance')" v-model="instance" :data="rocketTrace.instances"/>
        <TraceSelect :title="this.$t('type')" :value="traceType" @input="chooseType"
          :data="
              [{label:'ALL', key: '0'},
              {label:'HTTP服务', key: '1'},
              {label:'HTTP请求', key: '2'},
              {label:'RPC服务', key: '3'},
              {label:'RPC调用', key: '4'},
              {label:'SQL执行', key: '5'},
              {label:'缓存', key: '6'},
              {label:'日志', key: '7'},
              {label:'异常', key: '8'},
              ]"/>
        <TraceSelect  :title="this.$t('status')" :value="traceState" @input="chooseStatus"
                      :data="[{label:'ALL', key: '2'}, {label:'SUCCESS', key: '0'}, {label:'ERROR', key: '1'}]"/>
        <div class="mr-10" style="padding: 3px 15px 0" v-if="uri_show">
          <div class="sm grey">URI</div>
          <input type="text"  v-model="input_uri" class="rk-trace-search-input">
        </div>
        <div class="mr-10" style="padding: 3px 15px 0" v-if="url_show">
          <div class="sm grey">URL</div>
          <input type="text"  v-model="input_url" class="rk-trace-search-input">
        </div>
        <div class="mr-10" style="padding: 3px 15px 0" v-if="service_show">
          <div class="sm grey">服务名</div>
          <input type="text"  v-model="input_service" class="rk-trace-search-input">
        </div>
        <div class="mr-10" style="padding: 3px 15px 0" v-if="method_show">
          <div class="sm grey">方法名</div>
          <input type="text"  v-model="input_method" class="rk-trace-search-input">
        </div>
        <div class="mr-10" style="padding: 3px 15px 0" v-if="namespace_show">
          <div class="sm grey">namespace</div>
          <input type="text"  v-model="input_namespace" class="rk-trace-search-input">
        </div>
        <div class="mr-10" style="padding: 3px 15px 0" v-if="category_show">
          <div class="sm grey">category</div>
          <input type="text"  v-model="input_category" class="rk-trace-search-input">
        </div>
        <div class="mr-10" style="padding: 3px 15px 0" v-if="mapper_show">
          <div class="sm grey">mapper</div>
          <input type="text"  v-model="input_mapper" class="rk-trace-search-input">
        </div>
      </div>
    </div>
    <div class="rk-trace-search-more flex-h">
      <div class="mr-15">
        <span class="sm b grey mr-10">{{this.$t('traceID')}}:</span>
        <input type="text" v-model="traceId" class="rk-trace-search-input dib">
      </div>
      <div class="mr-15">
        <span class="sm b grey mr-10">{{this.$t('durationRange')}}:</span>
        <div class="rk-trace-search-range dib">
          <input class="vm tc" v-model="minTraceDuration">
          <span class="grey vm">-</span>
          <input class="vm tc" v-model="maxTraceDuration">
        </div>
      </div>
      <div>
        <span class="sm b grey mr-5">{{this.$t('timeRange')}}:</span>
        <RkDate class="sm" v-model="time" position="bottom" format="YYYY-MM-DD HH:mm:ss"/>
      </div>
    </div>
    <div class="flex-h">
      <div class="mr-10" style="padding-top: 5px">
        <span class="sm b grey mr-10">{{this.$t('esQueryMatch')}}:</span>
        <input type="text" v-model="match" class="rk-trace-search-input dib">
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { Action, Getter, State, Mutation } from 'vuex-class';
import { Trace } from '@/types/trace';
import { DurationTime, Option } from '@/types/global';
import TraceSelect from './trace-select.vue';

@Component({components: {TraceSelect}})
export default class TraceTool extends Vue {
  @State('rocketbot') private rocketbotGlobal: any;
  @State('rocketTrace') private rocketTrace: any;
  @Getter('durationTime') private durationTime: any;
  @Getter('duration') private duration: any;
  @Action('rocketTrace/GET_SERVICES') private GET_SERVICES: any;
  @Action('rocketTrace/GET_INSTANCES') private GET_INSTANCES: any;
  @Action('rocketTrace/GET_TRACELIST') private GET_TRACELIST: any;
  @Action('rocketTrace/SET_TRACE_FORM') private SET_TRACE_FORM: any;
  @Mutation('rocketTrace/SET_TRACE_FORM_ITEM') private SET_TRACE_FORM_ITEM: any;

  private uri_show: boolean = false;
  private url_show: boolean = false;
  private service_show: boolean = false;
  private method_show: boolean = false;
  private namespace_show: boolean = false;
  private category_show: boolean = false;
  private mapper_show: boolean = false;
  private input_uri: string = '';
  private input_url: string = '';
  private input_service: string = '';
  private input_method: string = '';
  private input_namespace: string = '';
  private input_category: string = '';
  private input_mapper: string = '';
  private time: Date[] = [new Date() , new Date()];
  private maxTraceDuration: string = '';
  private minTraceDuration: string = '';
  private match: string = '';
  private service: Option  = {label: 'ALL', key: 'ALL'};
  private instance: Option  = {label: 'ALL', key: 'ALL'};
  private traceState: Option  = {label: 'ALL', key: '2'};
  private traceId: string = '';
  private traceType: Option  = {label: 'ALL', key: '0'};
  private dateFormate = (date: Date, step: string) => {
    const year = date.getFullYear();
    const monthTemp = date.getMonth() + 1;
    let month: string = `${monthTemp}`;
    if (monthTemp < 10) {
      month = `0${monthTemp}`;
    }
    if (step === 'MONTH') {
      return `${year}-${month}`;
    }
    const dayTemp = date.getDate();
    let day: string = `${dayTemp}`;
    if (dayTemp < 10) { day = `0${dayTemp}`; }
    if (step === 'DAY') { return `${year}-${month}-${day}`; }
    const hourTemp = date.getHours();
    let hour: string = `${hourTemp}`;
    if (hourTemp < 10) { hour = `0${hourTemp}`; }
    if (step === 'HOUR') { return `${year}-${month}-${day} ${hour}`; }
    const minuteTemp = date.getMinutes();
    let minute: string = `${minuteTemp}`;
    if (minuteTemp < 10) { minute = `0${minuteTemp}`; }
    if (step === 'MINUTE') { return `${year}-${month}-${day} ${hour}${minute}`; }
  }
  private globalTimeFormate = (time: Date[]): any => {
    let step = 'MINUTE';
    const unix = Math.round(time[1].getTime()) - Math.round(time[0].getTime());
    if (unix <= 60 * 60 * 1000) {
      step = 'MINUTE';
    } else if (unix <= 24 * 60 * 60 * 1000) {
      step = 'HOUR';
    } else if (unix <= 30 * 24 * 60 * 60 * 1000) {
      step = 'DAY';
    } else {
      step = 'MONTH';
    }
    return { start: this.dateFormate(time[0], step), end: this.dateFormate(time[1], step), step };
  }
  private chooseStatus(i: any) {
      this.traceState = i;
  }
  private chooseService(i: any) {
    if (this.service.key === i.key) {
      return;
    }
    this.instance = {label: 'ALL', key: 'ALL'};
    this.service = i;
    if (i.key === '') {
      return;
    }
    this.GET_INSTANCES({duration: this.durationTime, serviceId: i.label});
  }
  private chooseType(i: any) {
    if(i.key == 0 || i.key == 7 || i.key == 8) {
        this.uri_show = false; this.url_show = false; this.service_show = false; this.method_show = false; this.namespace_show = false; this.category_show = false; this.mapper_show = false;
    }
    if(i.key == 1) {
        this.uri_show = true; this.url_show = false; this.service_show = false; this.method_show = false; this.namespace_show = false; this.category_show = false; this.mapper_show = false;
    }
    if(i.key == 2) {
        this.uri_show = false; this.url_show = true; this.service_show = false; this.method_show = false; this.namespace_show = false; this.category_show = false; this.mapper_show = false;
    }
    if(i.key == 3 || i.key == 4) {
        this.uri_show = false; this.url_show = false; this.service_show = true; this.method_show = true; this.namespace_show = false; this.category_show = false; this.mapper_show = false;
    }
    if(i.key == 5) {
        this.uri_show = false; this.url_show = false; this.service_show = false; this.method_show = false; this.namespace_show = false; this.category_show = false; this.mapper_show = true;
    }
    if(i.key == 6) {
        this.uri_show = false; this.url_show = false; this.service_show = false; this.method_show = false; this.namespace_show = true; this.category_show = true; this.mapper_show = false;
    }
    this.traceType = i;
  }
    private clearSearch() {
        this.time = [this.rocketbotGlobal.durationRow.start, this.rocketbotGlobal.durationRow.end];
        this.maxTraceDuration = '';
        this.minTraceDuration = '';
        this.service = { label: 'ALL', key: 'ALL' };
        this.instance = { label: 'ALL', key: 'ALL' };
        this.traceId = '';
        this.match = '';
        this.traceState = { label: 'ALL', key: '2' };
        this.traceType = { label: 'ALL', key: '0' };
        this.SET_TRACE_FORM_ITEM({ type: 'queryOrder', data: '' });
        this.input_url = '';
        this.input_service = '';
        this.input_method = '';
        this.input_namespace = '';
        this.input_category = '';
        this.input_mapper = '';
        this.getTraceList();
    }
  private getTraceList() {
    this.GET_SERVICES({duration: this.durationTime});
    const temp: any = {
          queryDuration: this.globalTimeFormate([
          new Date(this.time[0].getTime() +
          (parseInt(this.rocketbotGlobal.utc, 10) + new Date().getTimezoneOffset() / 60) * 3600000),
          new Date(this.time[1].getTime() +
          (parseInt(this.rocketbotGlobal.utc, 10) + new Date().getTimezoneOffset() / 60) * 3600000),
        ]),
        traceType: this.traceType.key,
        traceState:  this.traceState.key,
        paging: {pageNum: 1, pageSize: 15, needTotal: true},
        queryOrder: this.rocketTrace.traceForm.queryOrder, //默认"duration"
    };
    if (this.service.label) { temp.serviceId = this.service.label; }
    if (this.instance.label) { temp.serviceInstanceId = this.instance.label; }
    if (this.maxTraceDuration) { temp.maxTraceDuration = this.maxTraceDuration; }
    if (this.minTraceDuration) { temp.minTraceDuration = this.minTraceDuration; }
    if (this.traceId) { temp.traceId = this.traceId; }
    if (this.input_uri) { temp.input_uri = this.input_uri; }
    if (this.input_url) { temp.input_url = this.input_url; }
    if (this.input_service) { temp.input_service = this.input_service; }
    if (this.input_method) { temp.match = this.input_method; }
    if (this.input_namespace) { temp.input_namespace = this.input_namespace; }
    if (this.input_category) { temp.input_category = this.input_category; }
    if (this.input_mapper) { temp.input_mapper = this.input_mapper; }
    this.SET_TRACE_FORM(temp);
    this.GET_TRACELIST();
  }
  private mounted() {
    this.time = [this.rocketbotGlobal.durationRow.start, this.rocketbotGlobal.durationRow.end];
    this.getTraceList();
  }
}
</script>

<style lang="scss">
.rk-trace-search {
  flex-shrink: 0;
  background-color: #333840;
  color: #eee;
  width: 100%;
  padding: 3px 15px 8px;
}

.rk-trace-search-input {
  border-style: unset;
  outline: 0;
  padding: 2px 5px;
  border-radius: 3px;
}
.rk-trace-search-range{
  border-radius: 3px;
  background-color: #fff;
  padding: 1px;
  border-radius: 3px;
  input{
    width: 38px;
    border-style: unset;
    outline: 0;
  }
}
.rk-trace-search-btn{
  padding: 3px 9px;
  background-color: #484b55;
  border-radius: 4px;
  margin-top: 12px;
  &.bg-blue{
    background-color: #448dfe;
  }
}

.rk-trace-clear-btn {
  padding: 3px 9px;
  background-color: #484b55;
  border-radius: 4px;
  margin-top: 12px;
  &.bg-warning {
    background-color: #fbb03b;
  }
}

.trace-tips {
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

.rk-trace-search-more{
  //background-color: #484b55;
  padding: 4px 10px;
  border-radius: 3px;
  margin-top: 8px;
  position: relative;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);
  &:after {
    bottom: 100%;
    right: 30px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0,0, 0);
    border-bottom-color: #484b55;
    border-width: 8px;
    margin-right: 0px;
  }
}
</style>
